import { Form, Input, Button, Typography} from 'antd';
import {useHistory} from 'react-router-dom'
import axios from 'axios'
import './myform.css'
const RegisterForm = () => {
    const history=useHistory();
    const onFinish = async (values: any) => {
        try{
            await axios.post('http://123.56.149.216:8080/auth/register',{
                email:values.username,
                password:values.password,
                confirmPassword:values.confirmpassword
            },{
                headers: {"x-icode": "69ACF3816BF5D32D"}
            })
            history.push('/login')
        }catch (e) {
            alert('该用户名已被注册！');
        }
    };
    return (
        <div className="myform">
            <Typography.Title className="formtitle">旅游网注册页面</Typography.Title>
            <Form className="form"
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password />

                </Form.Item>

                <Form.Item
                    label="ConfirmPassword"
                    name="confirmpassword"
                    hasFeedback
                    rules={[{ required: true, message: 'Please input your confirmpassword!' },
                        ({getFieldValue})=>({
                            validator(_,value){
                                if(getFieldValue("password")===value){
                                    return Promise.resolve();
                                }
                                return Promise.reject("两次密码不一致！");
                            }
                        })
                    ]}
                >
                    <Input.Password />

                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};
export default RegisterForm